<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html{
            font-size: 20px;
        }
        div{
            width: 5rem;
            height: 5rem;
            background: red;
        }
    </style>
    <script>
        function change(){
            document.documentElement.style.fontSize=document.documentElement.clientWidth*20/375+'px'
        }
        change();
        window.onresize=change;
    </script>
</head>
<body>
    <div></div>
</body>
</html>
<script>
    let oDiv=document.querySelector('div');
    let x=oDiv.offsetLeft;
    let y=oDiv.offsetTop;

    oDiv.addEventListener('touchstart',function(){
        let disX=event.targetTouches[0].pageX-x;
        let disY=event.targetTouches[0].pageY-y;

        function fnMove(){
            x=event.targetTouches[0].pageX-disX;
            y=event.targetTouches[0].pageY-disY;
            oDiv.style.transform=`translate(${x}px,${y}px)`;
        }
        
        function fnEnd(){
            document.removeEventListener('touchmove',fnMove,false);
            document.removeEventListener('touchend',fnEnd,false);
        }

        document.addEventListener('touchmove',fnMove,false);
        document.addEventListener('touchend',fnEnd,false);
    },false)
</script>